﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="welcome.aspx.cs" Inherits="OrderManage.WebApp.welcome" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>成功充值月份汇总金额柱状图</title>

    <script src="lib/boot.js" type="text/javascript"></script>

    <script src="lib/chart/highcharts.js" type="text/javascript"></script>

    <script src="lib/chart/modules/exporting.js" type="text/javascript"></script>

</head>
<body>
    <div class="mini-toolbar" style="padding: 2px; border-bottom: 0;">
        <table style="width: 100%;">
            <tr>
                <td style="width: 100%;">
                    年：<input id="Year" name="Year" style="width: 120px;" class="mini-combobox" textfield="text"
                        valuefield="id" data="YearData" />
                    <a class="mini-button" iconcls="icon-search" onclick="search()">查 询</a> <a class="mini-button"
                        iconcls="icon-reset" onclick="reset()">重 置</a>
                </td>
            </tr>
        </table>
    </div>
    <div class="mini-fit">
        <div class="mini-panel" title="header" style="width: 100%; height: 100%;" showheader="false">
            <div id="barChart" align="center" style="min-width: 400px; height: 100%; margin: 0 auto">
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var d = new Date();
        var jy = d.getFullYear();
        var qy = d.getFullYear() - 1;
        var dqy = qy - 1;
        var YearData = [{ id: jy, text: jy + "年" }, { id: qy, text: qy + "年" }, { id: dqy, text: dqy + "年"}];
        mini.parse();
        mini.get("Year").setValue(jy);
        function search() {
            var Year = mini.get("Year").getValue();
            if (Year != "") {
                getValue(Year);
            }
            else {
                mini.alert("请选择年！");
            }
        }
        function reset(e) {
            mini.get("Year").setValue(jy);
        }

        function getValue(Year) {
            $.ajax({
                url: "Service/SystemManageHandler.ashx?action=GetTotalRechargeAmountChartList&Year=" + Year,
                cache: false,
                success: function(_jsonStr) {
                    _jsonStr = mini.decode(_jsonStr);
                    var categories = [];
                    var data = [];
                    for (var i = 0; i < _jsonStr.length; i++) {
                        var json = _jsonStr[i];
                        categories.push(json.Date);
                        data.push(json.TotalRechargeAmount);
                    }
                    var barchart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'barChart',
                            type: 'column',
                            margin: [50, 50, 100, 80]
                        },
                        title: {
                            text: '成功充值月份汇总金额柱状图',
                            labels: {
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        xAxis: {
                            labels: {
                                rotation: -45,
                                align: 'right',
                                style: {
                                    fontSize: '13px',
                                    color: '#000000',
                                    fontWeight: 'bold',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '次数'
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        tooltip: {
                            formatter: function() {
                                return '年月:' + '<b>' + this.x + '</b><br/>' +
                                '金额:' + this.y + '人民币';
                            }
                        },
                        series: [{
                            dataLabels: {
                                enabled: true,
                                rotation: -90,
                                color: '#FFFFFF',
                                align: 'right',
                                x: -3,
                                y: 10,
                                formatter: function() {
                                    return this.y;
                                },
                                style: {
                                    fontSize: '13px',
                                    fontFamily: 'Verdana, sans-serif'
                                }
                            }
}]
                        });
                        barchart.xAxis[0].setCategories(categories);
                        barchart.series[0].setData(data);
                        barchart.redraw();
                    }
                });
            }

            function CloseWindow(action) {
                if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
                else window.close();
            }

            function close() {
                CloseWindow("close");
            }
    </script>

</body>
</html>
